<template>
  <view class="build_diary_page flex-col">

    <view class="section_2 flex-col">
      <view class="box_3 flex-row justify-between">
        <view class="text-group_1 flex-col justify-between">
          <text class="text_3">04</text>
          <text class="text_4">2023/3</text>
        </view>
        <view class="section_3 flex-col">
          <view class="block_1 flex-row justify-between">
            <div class="tag_1 flex-col"><text class="text_5">80%</text></div>
            <text class="text_6">「华侨城天澜美墅别墅」现代简约</text>
          </view>
          <text class="text_7">
            金科廊桥水乡3期3单元6-6联合香港九龙仓打造。共分四期开发，占地约324亩，总建筑面积万方。
          </text>
          <view class="image-wrapper_1 flex-row">
            <image class="image_2" referrerpolicy="no-referrer" :src="item.lanhuimage0"
              v-for="(item, index) in loopData0" :key="index" />
          </view>
        </view>
      </view>
      <view class="box_4 flex-row justify-between">
        <view class="text-group_2 flex-col justify-between">
          <text class="text_8">04</text>
          <text class="text_9">2023/3</text>
        </view>
        <view class="box_5 flex-col">
          <view class="group_1 flex-row justify-between">
            <div class="tag_2 flex-col"><text class="text_10">80%</text></div>
            <text class="text_11">「华侨城天澜美墅别墅」现代简约</text>
          </view>
          <text class="text_12">
            金科廊桥水乡3期3单元6-6联合香港九龙仓打造。共分四期开发，占地约324亩，总建筑面积万方。
          </text>
          <view class="image-wrapper_2 flex-row">
            <image class="image_3" referrerpolicy="no-referrer" :src="item.lanhuimage0"
              v-for="(item, index) in loopData1" :key="index" />
          </view>
        </view>
      </view>
      <view class="box_6 flex-row justify-between">
        <view class="text-group_3 flex-col justify-between">
          <text class="text_13">04</text>
          <text class="text_14">2023/3</text>
        </view>
        <view class="box_7 flex-col">
          <view class="block_2 flex-row justify-between">
            <div class="tag_3 flex-col"><text class="text_15">80%</text></div>
            <text class="text_16">「华侨城天澜美墅别墅」现代简约</text>
          </view>
          <text class="text_17">
            金科廊桥水乡3期3单元6-6联合香港九龙仓打造。共分四期开发，占地约324亩，总建筑面积万方。
          </text>
          <view class="image-wrapper_3 flex-row">
            <image class="image_4" referrerpolicy="no-referrer"
              src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG1c49ac3a44723b28980865fc4509c28a.png" />
            <image class="image_5" referrerpolicy="no-referrer"
              src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGda070629632e96ddd140c3e940d483bc.png" />
            <image class="image_6" referrerpolicy="no-referrer"
              src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG918b36fc37b6bc677862ba8f073d39a8.png" />
          </view>
        </view>
      </view>
    </view>
    <button class="button_1 flex-col" @click="onClick_1">
      <text class="text_18">更新日记</text>
    </button>
  </view>
</template>
<script setup>
import { } from 'vue'
const loopData0 = [
  {
    lanhuimage0:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG1c49ac3a44723b28980865fc4509c28a.png',
  },
  {
    lanhuimage0:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGda070629632e96ddd140c3e940d483bc.png',
  },
  {
    lanhuimage0:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG918b36fc37b6bc677862ba8f073d39a8.png',
  },
]
const loopData1 = [
  {
    lanhuimage0:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG1c49ac3a44723b28980865fc4509c28a.png',
  },
  {
    lanhuimage0:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGda070629632e96ddd140c3e940d483bc.png',
  },
  {
    lanhuimage0:
      'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG918b36fc37b6bc677862ba8f073d39a8.png',
  },
]
const onClick_1 = () => { }
</script>
<style scoped lang="scss">
.build_diary_page {
  background-color: rgba(245, 245, 245, 1);
  position: relative;
  width: 750rpx;
  height: 1624rpx;
  overflow: hidden;

  .section_1 {
    width: 750rpx;
    height: 176rpx;
    background: url(https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG7cab3346f8788563295785e5499d67fa.png) 100% no-repeat;
    background-size: 100% 100%;

    .box_1 {
      width: 682rpx;
      height: 36rpx;
      margin: 30rpx 0 0 42rpx;

      .text_1 {
        width: 108rpx;
        height: 36rpx;
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 1);
        font-size: 30rpx;
        letter-spacing: -0.30000001192092896px;
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        line-height: 36rpx;
      }

      .thumbnail_1 {
        width: 34rpx;
        height: 22rpx;
        margin: 6rpx 0 0 438rpx;
      }

      .thumbnail_2 {
        width: 32rpx;
        height: 22rpx;
        margin: 6rpx 0 0 10rpx;
      }

      .image_1 {
        width: 50rpx;
        height: 24rpx;
        margin: 6rpx 0 0 10rpx;
      }
    }

    .nav-bar_1 {
      width: 750rpx;
      height: 102rpx;
      margin: 10rpx 0 2rpx 0;

      .icon_1 {
        width: 18rpx;
        height: 34rpx;
        margin: 40rpx 0 0 36rpx;
      }

      .text_2 {
        width: 134rpx;
        height: 40rpx;
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 0.9);
        font-size: 34rpx;
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        line-height: 40rpx;
        margin: 32rpx 0 0 256rpx;
      }

    }
  }

  .section_2 {
    width: 750rpx;
    height: 1338rpx;

    .box_3 {
      width: 700rpx;
      height: 408rpx;
      margin: 20rpx 0 0 26rpx;

      .text-group_1 {
        width: 90rpx;
        height: 58rpx;

        .text_3 {
          width: 36rpx;
          height: 24rpx;
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 30rpx;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 24rpx;
          margin-left: 28rpx;
        }

        .text_4 {
          width: 90rpx;
          height: 24rpx;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 26rpx;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 24rpx;
          margin-top: 10rpx;
        }
      }

      .section_3 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        width: 590rpx;
        height: 408rpx;

        .block_1 {
          width: 530rpx;
          height: 40rpx;
          margin: 30rpx 0 0 20rpx;

          .tag_1 {
            height: 36rpx;
            background: url(https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG6008a64ed5d8d832f8da4465a5bbe095.png) 100% no-repeat;
            background-size: 100% 100%;
            margin-top: 2rpx;
            width: 88rpx;

            .text_5 {
              width: 52rpx;
              height: 24rpx;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 26rpx;
              font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx;
              margin: 6rpx 0 0 18rpx;
            }
          }

          .text_6 {
            width: 442rpx;
            height: 40rpx;
            overflow-wrap: break-word;
            color: rgba(36, 36, 36, 1);
            font-size: 30rpx;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }
        }

        .text_7 {
          width: 524rpx;
          height: 120rpx;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 26rpx;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          line-height: 40rpx;
          margin: 10rpx 0 0 22rpx;
        }

        .image-wrapper_1 {
          width: 538rpx;
          height: 170rpx;
          margin: 20rpx 0 18rpx 22rpx;

          .image_2 {
            width: 170rpx;
            height: 170rpx;
            margin-right: 14rpx;
          }
        }
      }
    }

    .box_4 {
      width: 700rpx;
      height: 408rpx;
      margin: 40rpx 0 0 26rpx;

      .text-group_2 {
        width: 90rpx;
        height: 58rpx;

        .text_8 {
          width: 36rpx;
          height: 24rpx;
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 30rpx;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 24rpx;
          margin-left: 28rpx;
        }

        .text_9 {
          width: 90rpx;
          height: 24rpx;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 26rpx;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 24rpx;
          margin-top: 10rpx;
        }
      }

      .box_5 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        width: 590rpx;
        height: 408rpx;

        .group_1 {
          width: 530rpx;
          height: 40rpx;
          margin: 30rpx 0 0 20rpx;

          .tag_2 {
            height: 36rpx;
            background: url(https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG6008a64ed5d8d832f8da4465a5bbe095.png) 100% no-repeat;
            background-size: 100% 100%;
            margin-top: 2rpx;
            width: 88rpx;

            .text_10 {
              width: 52rpx;
              height: 24rpx;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 26rpx;
              font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx;
              margin: 6rpx 0 0 18rpx;
            }
          }

          .text_11 {
            width: 442rpx;
            height: 40rpx;
            overflow-wrap: break-word;
            color: rgba(36, 36, 36, 1);
            font-size: 30rpx;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }
        }

        .text_12 {
          width: 524rpx;
          height: 120rpx;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 26rpx;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          line-height: 40rpx;
          margin: 10rpx 0 0 22rpx;
        }

        .image-wrapper_2 {
          width: 538rpx;
          height: 170rpx;
          margin: 20rpx 0 18rpx 22rpx;

          .image_3 {
            width: 170rpx;
            height: 170rpx;
            margin-right: 14rpx;
          }
        }
      }
    }

    .box_6 {
      width: 700rpx;
      height: 408rpx;
      margin: 40rpx 0 14rpx 26rpx;

      .text-group_3 {
        width: 90rpx;
        height: 58rpx;

        .text_13 {
          width: 36rpx;
          height: 24rpx;
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 30rpx;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 24rpx;
          margin-left: 28rpx;
        }

        .text_14 {
          width: 90rpx;
          height: 24rpx;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 26rpx;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 24rpx;
          margin-top: 10rpx;
        }
      }

      .box_7 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        width: 590rpx;
        height: 408rpx;

        .block_2 {
          width: 530rpx;
          height: 40rpx;
          margin: 30rpx 0 0 20rpx;

          .tag_3 {
            height: 36rpx;
            background: url(https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG6008a64ed5d8d832f8da4465a5bbe095.png) 100% no-repeat;
            background-size: 100% 100%;
            margin-top: 2rpx;
            width: 88rpx;

            .text_15 {
              width: 52rpx;
              height: 24rpx;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 26rpx;
              font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx;
              margin: 6rpx 0 0 18rpx;
            }
          }

          .text_16 {
            width: 442rpx;
            height: 40rpx;
            overflow-wrap: break-word;
            color: rgba(36, 36, 36, 1);
            font-size: 30rpx;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }
        }

        .text_17 {
          width: 524rpx;
          height: 120rpx;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 26rpx;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: normal;
          text-align: left;
          line-height: 40rpx;
          margin: 10rpx 0 0 22rpx;
        }

        .image-wrapper_3 {
          width: 538rpx;
          height: 170rpx;
          margin: 20rpx 0 18rpx 22rpx;

          .image_4 {
            width: 170rpx;
            height: 170rpx;
          }

          .image_5 {
            width: 168rpx;
            height: 170rpx;
            margin-left: 14rpx;
          }

          .image_6 {
            width: 170rpx;
            height: 170rpx;
            margin-left: 16rpx;
          }
        }
      }
    }
  }

  .button_1 {
    background-color: rgba(97, 52, 27, 1);
    height: 88rpx;
    width: 690rpx;
    margin: -2rpx 0 24rpx 30rpx;

    .text_18 {
      width: 134rpx;
      height: 30rpx;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 32rpx;
      letter-spacing: 7px;
      font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
      font-weight: normal;
      text-align: center;
      white-space: nowrap;
      line-height: 30rpx;
      margin: 30rpx 0 0 278rpx;
    }
  }
}
</style>